<template>
    <div class="formBox" ref="container" style="width: 100%;height:100%;">
        <component :is="currentView" v-bind="props" :key="viewKey"></component>
    </div>
</template>

<script>
import {RxFit, Util,RxLoading} from "@lowcode/jpaas-base-lib";
import BpmInstApi from "@/common/api/bpm/bpmInst";
import BpmInstStart from "./BpmInstStart.vue";
import BpmTaskStart from "./BpmTaskStart.vue";
import BpmInstDetail from "./BpmInstDetail.vue";
import BpmInstOperator from "./BpmInstOperator.vue";
import FlowUtil from "../js/FlowUtil.js";
import { mapState } from 'pinia';
import useMain from "@/stores/useMain";

//打开文档的窗口
export default {
    name: "OpenDoc",
    inject:['appId'],
    mixins: [FlowUtil],
    components:{
        RxFit
    },
    props:{
        params:{},
        newPage:{
            type:Boolean,
            default:true
        },
    },
    computed:{
      ...mapState(useMain,['appKey']),
    },
    data(){
        return {
            props:{},
            currentView:RxLoading,
            actionMap:{
                start:BpmInstStart,
                startDraft:BpmInstStart,
                task:BpmTaskStart,
                detail:BpmInstDetail,
                operator:BpmInstOperator
            },
            viewKey:"",
            isNewPage:this.newPage
        }
    },
    created() {
        this.init();
        this.$bus.on("flowEvent",(e=>{
            this.handEvent(e);
        }))

    },
    beforeUnmount(){
        this.$bus.off("flowEvent");
    },

    methods:{
        init(){
            if(this.$route.query.operator){
                this.initOperator();
                return;
            }
            let startInst=false;
            let params=this.params || this.$route.params;
            let routerName= params.name ||this.$route.name;
            let type=routerName;
            if(routerName=="newDoc" || routerName=="newDocTab"){
                startInst=true;
                type="newDoc";
            }
            if(routerName=="openDocTab" || routerName=="openDoc"){
                type="openDoc";
            }
            this.isNewPage = true;
            let action = params.action || this.$route.query.action;
            let taskId = this.$route.query.taskId || "";
            let id = type == "newDoc" ? params.defKey : params.instId;
            this.getInfoByDefKeyInstId(type,id,action,taskId,params);
        },
        getInfoByDefKeyInstId(type,id,action,taskId,params){
            let from = params.from || this.$route.query.from;
            let preview = JSON.parse(params.preview || this.$route.query.preview || false);
            let startUserId = params.startUserId || this.$route.query.startUserId;
            BpmInstApi.getInfoByDefKeyInstId(type,id,action,taskId,this.appId).then(res=>{
                if(!res.success){
                    this.$message.warn(res.message);
                    return;
                }
                this.viewKey=Util.randomId();
                this.currentView=this.actionMap[res.action];
                console.log(res.action)
                if(res.action=="start") {
                    let conf={defKey: id};
                    this.props.config = conf;
                    this.props.preview = preview;
                    this.props.startUserId = startUserId;
                }
                if(res.action=="startDraft" ){
                    this.props.instId= res.instId;
                    this.props.config={defKey:res.defKey};
                }
                if(res.action=="task" ){
                    this.props.taskId= res.taskId;
                    this.props.instId= res.instId;
                }
                if(res.action=="detail" ){
                    this.props.instId= res.instId;
                    if(from){
                        this.props.from= from;
                    }
                }
            })
        },
        initOperator(){
            this.viewKey=Util.randomId();
            this.currentView=this.actionMap.operator;
            this.props=this.$route.query;
        },
        handEvent(event){
            let appId=this.$route.query.appId;
            if(this.isNewPage){
                if(event.action=="start"){
                    let instId=event.data.instId;
                    this.pushInst(instId,appId);
                }
                if(event.action=="task"){
                    let instId=event.data;
                    this.pushInst(instId,appId);
                }
                if(event.action=="inst"){
                    let instId=event.data;
                    this.pushInst(instId,appId);
                }
            }else {
                if(event.action=="start"){
                    this.instId=event.data.instId;
                }
                if(event.action=="task"){
                    this.instId=event.data;
                }
                if(event.action=="inst"){
                    this.instId=event.data;
                }
                let params=this.params || this.$route.params;
                this.getInfoByDefKeyInstId("openDoc",this.instId,"inst","",params);
            }
        }
    },
    watch:{
        "$route":function (val,oldVal){
            if(val.name==='appHome'){
              return;
            }
            this.init();
        },
        params:{
            handler(v){
                this.init();
            },
            deep:true
        }
    }
}
</script>

<style scoped>
.navbar {
    margin-top: 20px;
    width: 756px;
    padding-right: 20px;
    height: 688px;
    overflow: hidden;
}

.navbar img {
    width: 736px;
    height: 688px;
}
.formBox{
    display: flex;
    flex-direction: column;
}

.formContainer{
    flex: 1;
    position: relative;
}
.formContainerRoll .formCenter{
    max-width: 1300px;
    margin: auto;
}
.formContainerRoll{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}
.formFooter{
    text-align: right;
    padding: 10px;
    border-top: 1px solid #ddd;
}
.formFooter button{
    margin-left: 6px;
}
.header{
    background-color: #4285f4;
    display: flex;
    justify-content: space-between;
    height: 50px;
    align-items: center;
    padding: 0 10px;
    color: #fff;
}
.logoText{
    display: inline-block;
    padding: 2px 8px;
    line-height: normal;
    border:1px solid #fff;
    border-radius: 4px;
    font-weight: bold;
    margin-right: 6px;
}
.rightToolBar{
    display: flex;
}
.current{
    margin-left: 16px;
    position: relative;
}
.treeBox .text .icon{
    padding-right: 6px;
}
.treeBox .text{
    margin-right: 6px;
}
</style>
